<template>
  <div class="friendChain">
    <div class="friendChain-title">
      <h2>友情链接</h2>
    </div>
    <div class="friendChain-content">
      <div class="link-body" v-for="(item, index) in friendChainList" :key="index">
        <div class="link-contain-main">
          <div class="link-meta">
            <div itemprop="author" class="link-author">
              <a :href="item.url" rel="nofollow" target="_blank" :title="item.name" class="author-name">
                {{ item.name }}
              </a>
            </div>
          </div>
          <div itemprop="description" class="link-content">
            {{ item.info }}
          </div>
        </div>
      </div>
    </div>
    <div class="friendChain-bottom">
        <div style="margin-left: 20px">
          <h3 class="directory2">特别说明</h3>
        </div>
        <div class="site">
          <div class="site-info">
            <div><h4>如需添加，可到关于页面留言</h4></div>
            <div>昵称：您的昵称</div>
            <div>邮箱：填写一个可以联系您的邮箱</div>
            <div>内容：友链链接 + 推荐原因</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import {listFriendChain} from "@/api/friend";

export default {
  name: 'friendChain',
  data() {
    return {
      friendChainList: []
    }
  },
  mounted() {
    this.listFriendChain();
  },
  methods: {
    // 查询友链
    listFriendChain() {
      listFriendChain().then(res => {
        this.friendChainList = res.data;
      })
    }
  }
}
</script>

<style scoped lang="less">
.friendChain {
  margin: 20px 0;
  background-color: #fff;
}

.friendChain-title {
  height: 70px;
  line-height: 70px;
  margin-left: 20px;
}

.friendChain-content {
  margin: 0 20px;
  min-height: 780px;
}

.link-body {
  margin: 10px 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 30%;
  text-align: center;
  background-color: #F8F8F8;
  height: 100px;
  padding: 5px;
  border-radius: 10px;
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

.link-contain-main {
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  padding-top: 20px;
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  vertical-align: baseline;
}

.link-content {
  font-size: 14px;
}

a {
  color: #03a9f4;
  text-decoration: none;
}

.site {
  background-color: #1d72f320;
  color: #8c939d;
  border-left: 5px solid #2c3e50;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.site-info {
  padding: 10px;
  font-size: 14px;
}

.site-info div {
  margin: 5px auto;
}

.friendChain-bottom {
  padding-bottom: 20px;
}
</style>

